<template>
	<div class="index">
		<div class="shopping_cart" v-if="token">
			<div class="shopping_edit">
				<div class="left">
					全部（共 <span>{{shoppingList.length}}</span> 件,库存不足<span>{{stockStatusList.length}}</span>件）
				</div>
				<div class="right" @click="changeisEdit">
					<u-icon v-if="!isEdit" name="trash" color="#FF3B47" size="20"></u-icon>
					<span>{{isEdit ? '完成' : '编辑'}}</span>
				</div>
			</div>
			<div class="shopping_content">
				<scroll-view class="scroll-view" 
						:scroll-y="true"
						:refresher-enabled="true"
						:enable-back-to-top="true"
						:scroll-anchoring="true"
						:refresher-triggered="triggered"
						@refresherrefresh="onRefresh"
						@scrolltolower="onLower">
					<u-checkbox-group placement="column" v-model="checkedArr" activeColor="#FC6420" @change="checkboxChange">
						<div class="shopping_card" v-for="(item,key) in checkList" :key="key">
							<u-checkbox shape="circle" :name="item.id" :disabled="(item.publishStatus==0 && !isEdit) || item.stockStatus == 2">
							</u-checkbox>
								<div class="checkbox">
									<img :src="item.pic" alt="">
									<div class="checkbox_right">
										<div class="title">
											<span class="text" :class="(item.publishStatus==0 ||  item.stockStatus == 2) ? 'disable-text' : ''">{{ item.productName }}</span>
												<span class="num">x{{ item.productAmount }}</span>
										</div>
										<div class="remark" v-if="item.publishStatus">
											规格型号 {{item.propertiesValue}}
										</div>
										<div class="money" v-if="item.publishStatus && item.stockStatus == 1">
											<span><u>￥</u>{{item.salesPrice}}</span>
											<u-icon v-if="!isEdit" name="edit-pen" color="#BDC2C7" size="28" @click="showSku(item)"></u-icon>
											<u-icon v-if="isEdit" name="minus-circle-fill" color="#FF3926" size="22" @click="delCart(item)"></u-icon>
										</div>
										<div class="disabled_repeat" v-if="(item.publishStatus==0 || item.stockStatus == 2)">
											<span>请重新选择商品规格</span>
											<div v-if="!isEdit" class="button" @click="showSku(item)">重选</div>
											<u-icon v-if="isEdit" name="minus-circle-fill" color="#FF3926" size="22" @click="delCart(item)"></u-icon>
										</div>
									</div>
								</div>
						</div>
					</u-checkbox-group>
					<div class="card" v-if="stockStatusList.length">
						<div class="shopping_edit">
							<div class="left">
								失效商品共<span>{{stockStatusList.length}}</span>件
							</div>
							<div class="right red" @click="delNoCart">清空失效商品</div>
						</div>
						<div class="shopping_card" v-for="(item,key) in stockStatusList" :key="key">
							<u-checkbox shape="circle" :name="item.id" :disabled="(item.publishStatus==0 && !isEdit) || item.stockStatus == 2">
							</u-checkbox>
							<div class="checkbox">
								<img :src="item.pic" alt="">
								<div class="checkbox_right">
									<div class="title">
										<span class="text" :class="(item.publishStatus==0 ||  item.stockStatus == 2) ? 'disable-text' : ''">{{ item.productName }}</span>
											<span class="num">x{{ item.productAmount }}</span>
									</div>
									<div class="remark" v-if="item.publishStatus">
										规格型号 {{item.propertiesValue}}
									</div>
									<div class="money" v-if="item.publishStatus && item.stockStatus == 1">
										<span><u>￥</u>{{item.salesPrice}}</span>
										<u-icon v-if="!isEdit" name="edit-pen" color="#BDC2C7" size="28" @click="showSku(item)"></u-icon>
										<u-icon v-if="isEdit" name="minus-circle-fill" color="#FF3926" size="22" @click="delCart(item)"></u-icon>
									</div>
									<div class="disabled_repeat" v-if="(item.publishStatus==0 || item.stockStatus == 2)">
										<span>修改库存</span>
										<div v-if="!isEdit" class="button" @click="showSku(item)">重选</div>
										<u-icon v-if="isEdit" name="minus-circle-fill" color="#FF3926" size="22" @click="delCart(item)"></u-icon>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="diver" v-if="finished && shoppingList.length">
						<u-divider text="没有更多了"></u-divider>
					</div>
					<div class="empty" v-if="!shoppingList.length">
						<u-empty mode="car" text="暂无商品"></u-empty>
					</div>
				</scroll-view>
			</div>
			<div class="shopping_bottom">
				<u-checkbox-group v-model="checked" activeColor="#FC6420">
					<u-checkbox shape="circle" name="all" label="全选" ></u-checkbox>
				</u-checkbox-group>
				<div v-if="!isEdit" class="shopping_money">
					<span>已选{{checkedArr.length}}件</span>
					<span class="money"><u>￥</u>{{totalMoney}}</span>
				</div>
				<div v-if="!isEdit" class="btn">
					<u-button type="primary" color="#FC6420" text="去结算" @click="goJieSuan"></u-button>
				</div>
				<div v-if="isEdit" class="del">
					<div class="btn">
						<u-button type="primary" color="#FF3926" text="删 除" @click="delCart"></u-button>
					</div>
				</div>
			</div>
		</div>
		<div class="shopping_cart center" v-else>
			<div class="empty_no_login">
				<u-empty mode="permission" text="您还没有登录哦"></u-empty>
			</div>
			<u-button  type="primary" color="#FA5D0A"  shape="circle" @click="goLogin">去登录</u-button>
		</div>
			<!-- 弹出框Sku -->
		<u-popup :show="showSkuModal" mode="bottom" :round="16" @close="close" >
      <sku-modal v-if="showSkuModal" :goodsObj="goodsObj" :num="3" @goOrder="goOrder"></sku-modal>
    </u-popup>
	</div>
</template>

<script>
import SkuModal from '../../components/SkuModal.vue'
	import auth from '../../api/auth.js'
	export default {
		components:{
			SkuModal
		},
		data() {
			return {
				goodsObj:{},
				showSkuModal:false,
				isEdit: false,
				pageNum: 1,
				checked: [],
				checkedArr: [],
				totalMoney: 0,
				shoppingList: [],
				checkList: [],
				stockStatusList: [],
				triggered: false,
				loading: true,
				finished: false,
				goodsCount:0,
				token: ''
			}
		},
		onShow() {
			this.token = uni.getStorageSync("AUTH_TOKEN");
			if(this.token) {
				this.finished=  false
				this.pageNum = 1
				this.shoppingList = []
				this.getMyOrderCartList()
			}
		},
		watch:{
			checked(val) {
				if(val.length) {
					let Tmoney = 0
					let list = []
					this.shoppingList.map(_=>{
						if(!this.isEdit) {
							if(_.publishStatus) {
								if(_.stockStatus == 1) {
									list.push(_.id)
									Tmoney +=_.salesPrice * _.productAmount
								}
							}
						} else {
							list.push(_.id)
							Tmoney +=_.salesPrice * _.productAmount
						}
					})
					this.totalMoney = Math.floor(Tmoney * 100) / 100
					this.checkedArr = list
				} else {
					this.checkedArr = []
					this.totalMoney = 0
				}
			}
		},
		methods: {
			async getMyOrderCartList() {
				let params = {
					pageNum:this.pageNum,
					pageSize: 99999
				}
				let res = await auth.getMyOrderCartList(params)
				let stockStatusList = []
				let shoppingList = []
				res.data.length && res.data.map(_=>{
					_.salesPrice = Math.floor(_.salesPrice * 100) / 100
					if(_.stockStatus === 2) {
						stockStatusList.push(_)
					} else {
						shoppingList.push(_)
					}
				})
				this.checkList = [...shoppingList]
				this.stockStatusList = [...stockStatusList]
				this.shoppingList = [...shoppingList,...stockStatusList]
				this.goodsCount = res.pages
				if(this.pageNum == this.goodsCount) {
					this.finished = true
				}
			},
			goLogin() {
 				uni.clearStorageSync()
        uni.reLaunch({url: '/subPackages/Login/index'})
			},
			close() {
				this.showSkuModal = false
			},
			// 获取分类菜单
			showSku(item) {
				this.goodsObj = item
				this.showSkuModal = true
			},
			async goOrder(obj) {
				console.log(obj)
				this.showSkuModal =  false
				delete obj.skuObj.productId
				await auth.changeCartNum(obj.skuObj)
				this.finished=  false
				this.checkedArr = []
				this.totalMoney = 0
				this.checked = []
				this.pageNum = 1
				this.shoppingList = []
				this.getMyOrderCartList()
				console.log("onRefresh");
				setTimeout(() => {
					this.triggered = false;
				}, 1000);
			},
			checkboxChange(n) {
				if(n.length) {
					let Tmoney = 0
					this.shoppingList.map(_=>{
						if(n.find(res=>res==_.id)) {
							Tmoney +=_.salesPrice * _.productAmount
						}
					})
					this.totalMoney = Math.floor(Tmoney * 100) / 100
				} 
			},
			changeisEdit() {
				this.isEdit = !this.isEdit
				this.checked = []
				this.checkedArr = []
			},
			onRefresh() {
				this.triggered = true;
				this.finished=  false
				this.pageNum = 1
				this.shoppingList = []
				this.getMyOrderCartList()
				console.log("onRefresh");
				setTimeout(() => {
					this.triggered = false;
				}, 1000);
			},
			onLower() {
				// if(this.pageNum < this.goodsCount) {
				// 	this.pageNum++
				// 	this.getMyOrderCartList()
				// } else {
				// 	this.finished = true
				// }
			},
			// 结算
			goJieSuan() {
				let cardIds = this.checkedArr.join(',')
				uni.navigateTo({
					url: `/pages/GouWuChe/jieSuan?totalMoney=${this.totalMoney}&cardIds=${cardIds}&source=2`,
				})
			},
			// 删除购物车
			delCart(item) {
				let cardIds = item ? [item.id] : [...this.checkedArr]
				if(cardIds.length) {
					uni.showModal({
						cancelText:'我再想想',
						content: '确认将这'+cardIds.length+'个宝贝删除？',
						success: async (res)=> {
							if (res.confirm) {
								await auth.delOderCart({cardIds:cardIds})
								this.finished=  false
								this.pageNum = 1
								this.shoppingList = []
								this.getMyOrderCartList()
							} else if (res.cancel) {
							}
						}
					});
				} else {
					uni.$u.toast('您还没有选择宝贝')
				}

			},
			delNoCart() {
				let cardIds = []
				this.stockStatusList.map(_=>{
					cardIds.push(_.id)
				})
				if(cardIds.length) {
					uni.showModal({
						cancelText:'我再想想',
						content: '确认将这'+cardIds.length+'个失效商品删除,也可修改库存后重新加入购物车？',
						success: async (res)=> {
							if (res.confirm) {
								await auth.delOderCart({cardIds:cardIds})
								this.finished=  false
								this.pageNum = 1
								this.shoppingList = []
								this.getMyOrderCartList()
							} else if (res.cancel) {
							}
						}
					});
				} else {
					uni.$u.toast('您还没有选择宝贝')
				}
			}
		}
	}
</script>

<style lang="scss">
.index {
	height: 100%;
	background: #f5f7f9;
	.shopping_cart {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.card {
			background: #fff;
			.red {
				color: #f00;
			}
		}
		.tips {
			padding: 24rpx;
			font-size: 24rpx;
			color: #FC6420;
			border-top: 1px solid #eaeaea;
		}
		.shopping_edit {
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			padding: 0 32rpx;
			background: #fff;
			.left {
				font-weight: 500;
				span {
					color: #FC6420;
				}
			}
			.right{
				display: flex;
				align-items: center;
				img {
					margin-right: 8rpx;
				}
			}
		}
		.shopping_content {
			flex: 1;
			margin: 0 32rpx;
			overflow: hidden;
			.scroll-view {
				height: 100%;
				display: flex;
				flex-direction: column;
				.shopping_card {
					display: flex;
					align-items: center;
					background: #fff;
					padding: 24rpx;
					margin-bottom: 32rpx;
					margin-top: 32rpx;
					border-radius: 16rpx;
					.checkbox {
						flex: 1;
						display: flex;
						img {
							width: 176rpx;
							height: 176rpx;
							padding-right: 24rpx;
							border-radius: 8rpx;
						}
						.checkbox_right{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.title{
								display: flex;
								.text {
									flex: 1;
									color: #222;
									font-size: 26rpx;
									font-weight: 500;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}
								.disable-text {
									color: #8C9398;
								}
								.num {
									color: #BDC2C7;
									font-size: 26rpx;
									margin-left: 16rpx;
								}
							}
							.remark {
								color: #8C9398;
								font-size: 20rpx;
							}
							.money {
								display: flex;
								justify-content: space-between;
								span {
									color: #FA5D0A;
									font-size: 36rpx;
									font-weight: 500;
									display: flex;
									align-items: baseline;
									u {
										font-size: 24rpx;
									}
								}
							}
							.disabled_repeat {
								display: flex;
								justify-content: space-between;
								span {
									color: #BDC2C7;
									font-size: 26rpx;
								}
								.button {
									width: 64rpx;
									height: 36rpx;
									font-size: 20rpx;
									line-height: 36rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #FA5D0A;
									border: 1px solid #FA5D0A;
									border-radius: 8rpx;
								}
							}
						}
					}
				}
			}
		}
		.diver {
			margin-bottom: 60rpx;
			overflow: hidden;
		}
		.empty {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.shopping_bottom {
			height: 104rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			background: #fff;
			.shopping_money {
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 16rpx;
				span {
					color: #9BB3B7;
					font-size: 20rpx;
					margin-right: 8rpx;
				}
				.money {
					color: #FA5D0A;
					font-size: 36rpx;
					font-weight: 500;
					display: flex;
					align-items: baseline;
					u {
						font-size: 24rpx;
					}
				}
			}
			.btn {
				width: 200rpx;
				height: 72rpx;
			}
			.del {
				flex: 1;
				display: flex;
				flex-direction: row-reverse;
			}
		}
	}
	.center {
		justify-content: center;
		margin: 0 32rpx;
		.empty_no_login {
			margin-bottom: 60rpx;
		}
	}
}
</style>
